<template>
	<!--私密直播组件-->
	<div class="private-box">
		<div class="private-middle-box ">
			<div class="header-title">
				<p>您好,</p>
				<p>{{privateWordsText}}</p>
			</div>
			<p class="tip-msg">输入观看密码</p>
			<input id="simizhibo_mima" :class="inputClass" class="defaultInput" @blur="blurRu" v-model="privateInput" type="text" placeholder="请输入观看密码" />
			<div class="error-tip-box" v-if="isTip">
				<div class="tip-img"></div>
				<p>{{errorText}}</p>
			</div>
			<div :class="privateBtn" @click="submitBtn">
				立即观看
			</div>
			<div class="back-home" @click="backHome">
				返回首页
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				privateInput: "", //input输入框内容
				inputClass: 'psd-input-gray', //输入框样式
				privateBtn: "private-btn-gray",
				isTip: false, //提示box
				errorText: '', //错误提示信息
				privateWordsText: "", //头部提示信息
			}
		},
		props: {
			lookBack_xq: Object, //回看数据
			type: String, //区分直播间 和回看
            privateWords: String, //直播间标题
		},
		computed: {

		},
		watch: {
			//监听底部按钮颜色变化
			privateInput() {
				if(this.privateInput) { //输入框有值
					this.privateBtn = "private-btn-red"
					this.inputClass = 'psd-input-gray'
					this.isTip = false
				} else {
					this.privateBtn = "private-btn-gray"
				}
			},
		},
		created() {
			if(this.type == 'lookBackCom') { //回看
				this.privateWordsText = this.privateWords || '欢迎观看本视频'
			} else if(this.type == 'liveCom') { //直播间
				this.privateWordsText = this.privateWords || '欢迎观看本直播'
			}
		},
		methods: {
			blurRu(){//失去焦点
				setTimeout(function() {
					window.scrollTo(0, 0)
				}, 10)
			},
			submitBtn() {
				let _this = this;
				if(!_this.privateInput) { //如果输入框为空
					_this.errorText = '请输入正确的密码'
					_this.inputClass = 'psd-input-red'
					_this.isTip = true
					return
				}
				if(_this.type == 'lookBackCom') {
                    _this.verifyLookBack()
				} else if(_this.type == 'liveCom') {
					_this.verifyLive()
				} else {
					console.log('私密组件传参错误')
				}

			},
			//回看密码验证
			verifyLookBack() {//this.$route.params.id   视频id
				this.$http.get("/h5live/checkBackLivePwd?pwd=" + this.privateInput + "&vid=" + this.$route.params.id).then(
					res => {
						if(res.data.code == "000000") {
							 let data = res.data.data.toString();
							 if(data.includes('mp4')||data.includes('MP4')) { //false 验证失败  true 验证通过
							    this.$store.dispatch("videoSrc", res.data.data);
								this.$emit("sendFather", {
									type: "successPrivate"
								});
								
							} else {
								this.errorText = '请输入正确的密码'
								this.isTip = true;
								this.inputClass = 'psd-input-red'
								this.privateInput = ''
							}
						}
					},
					err => {
						console.log(err);
					}
				);
			},
			//直播间验证
			verifyLive() { 
				//console.log(this.$route.params.roomid)   房间id
				let _this = this;
				_this.$http.get("/h5live/checkZbRoomPwd?pwd=" + _this.privateInput + "&roomId=" + _this.$route.params.roomid).then(
					res => {
						if(res.data.code == "000000") {
							//res.data.data = true
							if(res.data.data) { //false 验证失败  true 验证通过
								_this.$emit("sendFather", {type: "successPrivate"});
							} else {
								_this.errorText = '请输入正确的密码'
								_this.isTip = true;
								_this.inputClass = 'psd-input-red'
								_this.privateInput = ''
							}
						}

					},
					err => {
						console.log(err);
					}
				);

			},
			backHome() {
	             let channelList = ['zyzq','zgrscc','zxyh']
				 let currentChannel = this.$channel
				if(channelList.includes(currentChannel)) {
					this.$router.push({
								path: `${"/" + currentChannel +"/"+ currentChannel+'Home'}`
					});							
				} else {
					this.$router.push({
						path: "/" + currentChannel + "/home"
					});
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.private-box {
		width: 100vw;
		height: 100vh;
		/* background: rgb(102, 102, 102); */
		display: flex;
		justify-content: center;
		 padding-top: 130px;
		z-index: 1200;
	}
	.private-middle-box {
		width: calc(100vw - 120px);
		border-radius: 6px;
		position: relative;
	}
	
	.header-title {
		display: flex;
		flex-direction: column;
		padding-bottom: 84px;
	}
	.header-title p{
		font-size: 48px;
		font-weight: 500;
		color: #27344C;
		line-height: 70px;
	}
	.tip-msg{
		margin-bottom: 32px;
	}
	
	.psd-input-gray {
		color: #999999;
		font-size: 34px;
		line-height: 34px;
		font-weight: 500;
	}
	.psd-input-red {
	
		border-bottom: 2px solid #FF0000;
	
	}
	.psd-input-red {
		background: rgba(247, 248, 250, 1);
	}
	
	.defaultInput {
		width: 100%;
		padding: 16px 0;
		background:none;  
		outline:none;  
		border-bottom:1px solid #ccc;
	}
	  .defaultInput::-webkit-input-placeholder {
		text-align: left;
		font-size: 36px;
		font-weight: 400;
		color: #CECECE;
		
    }
	.private-btn-gray {
		width: 100%;
		height: 88px;
		background:#FFA691;
		box-shadow: 0 14px 25px #FFD9D0;
		border-radius: 4px;
		font-size: 38px;
		font-weight: 500;
		color: white;
		text-align: center;
		line-height: 88px;
		margin-bottom: 48px;
		margin-top: 162px;
	}
	
	.private-btn-red {
		width: 100%;
		height: 88px;
		background: #E8340A;
		box-shadow: 0 14px 25px #FFD9D0;
        border-radius: 4px;
		font-size: 38px;
		font-weight: 500;
		color: white;
		text-align: center;
		line-height: 88px;
		margin-bottom: 48px;
		margin-top: 162px;
	}
	
	.error-tip-box {
		display: flex;
		height: 32px;
		margin-top: 15px;
		align-items: center;
	}
	
	.tip-img {
		width: 32px;
		height: 32px;
		margin-bottom: 4px;
		background: url(../assets/images/tip-error.png) no-repeat;
		background-size: 32px 32px;
	}
	
	.error-tip-box p {
		color: #FB2830;
		font-size: 26px;
		margin-left: 8px;
	}
	
	.back-home {
		font-size: 28px;
		font-weight: 400;
		color: #9FA4AD;
		line-height: 34px;
		text-align: center;
	}
	input:-webkit-autofill {
	/* 字体颜色，需要设置，否则会变成黑色 */
	-webkit-text-fill-color: #999999!important;
	/* 变成透明背景色的固定写法，只针对表单自动填充的背景色 */
	transition: background-color 5000s ease-in-out 0s;
}
</style>